<template>
  <div>
    <BaseModal @onClose="onClose" @onSubmit="onSubmit" :show="show" title="编辑教师">
      <!-- <div class="demo-input-suffix">
        <span class="form-input-label">用户ID：</span>
        <el-input v-if="data.userid" disabled v-model="data.userid" placeholder="请输入用户ID"></el-input>
      </div> -->

      <div class="demo-input-suffix">
        <span class="form-input-label">姓名：</span>
        <el-input v-model="data.real_name" placeholder="请输入教师姓名"></el-input> <i style="color: red;" class="el-icon-star-on"></i>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">手机号：</span>
        <el-input v-model="data.phone" placeholder="请输入手机号"></el-input> <i style="color: red;" class="el-icon-star-on"></i>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">邮 箱：</span>
        <el-input v-model="data.email" placeholder="请输入邮箱"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">性别：</span>
        <el-select v-model="data.sex" placeholder="请选择性别">
          <el-option
            v-for="item in sexes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>  <i style="color: red;" class="el-icon-star-on"></i>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">用户状态：</span>
        <el-select v-model="data.status" placeholder="请选择用户状态">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>  <i style="color: red;" class="el-icon-star-on"></i>
      </div>

      <!-- <div class="demo-input-suffix">
        <span class="form-input-label">身份类型：</span>
        <el-select v-model="data.identity" placeholder="请选择身份类型">
          <el-option
            v-for="item in identities"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div> -->
<!-- 
      <div class="demo-input-suffix">
        <span class="form-input-label">教师工号：</span>
        <el-input v-model="data.teacherid" placeholder="请输入 教师工号"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">学校：</span>
        <el-autocomplete
          class="inline-input"
          v-model="selectedSchool"
          :fetch-suggestions="querySchool"
          placeholder="请输入学校"
          @select="selectSchool"
        ></el-autocomplete>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">学院：</span>
        <el-autocomplete
          class="inline-input"
          v-model="selectedCollege"
          :fetch-suggestions="queryCollege"
          placeholder="请输入学院"
          @select="selectCollege"
        ></el-autocomplete>
      </div> -->
    </BaseModal>
  </div>
</template>
<script>
import status from "@/common/status";
import identities from "@/common/identities";
import modalClose from "@/mixins/modalClose";
import createFilter from '@/mixins/CreateFilter.js'
import {teacherModel} from '@/api/models'
import { Message } from 'element-ui';
import * as util from '@/utils/utils.js'
export default {
  mixins: [modalClose, createFilter],
  components: {},
  props: {
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      status: status.status,
      identities: identities.identities,
      selectedSchool: null,
      schools: [],
      selectedCollege: null,
      colleges: [],
      data: {
        userid: null,
        username: null,
        phone: null,
        email: null,
        sex: null,
        status: null,
        identity: null,
        // teacherid: null,
        // school_id: null,
        // college_id: null
      }
    };
  },
  watch: {
    obj: function(value) {
      if(value) {
        teacherModel.item(value.userid, res => {
          this.data = res.data;
          // this.selectedSchool = res.data.school_name;
          // this.selectedCollege = res.data.college_name;
        })
      }else{
        this.data = {
          userid: null,
          username: null,
          phone: null,
          email: null,
          sex: null,
          status: null,
          identity: null,
        }
      }
    }
  },
  mounted() {
    
  },
  methods: {
    onClose() {
      this.data = {
        userid: null,
        username: null,
        phone: null,
        email: null,
        sex: null,
        status: null,
        identity: null,
      }
      this.$emit("onClose");
    },
    onSubmit() {
      let d = this.data
      if(!d.real_name || !d.phone || !d.sex || !d.status) {
          return Message.warning('请填完整信息')
      }
      if (!util.checkPhone(d.phone)) {
        return Message.warning('手机号格式不正确')
      }
      if(d.userid) {
        teacherModel.update(d.userid, d, res => {
          Message.success(res.message)
          this.onClose()
          this.$emit('afterSubmit')
        })
      }else{
        teacherModel.create(d, res => {
          Message.success(res.message)
          this.onClose()
          this.$emit('afterSubmit')
        })
      }
    }
  }
};
</script>
<style lang="scss">
</style>